<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js" type="text/javascript"></script>
    <style>
        #box{
            display: flex;
            flex-direction: column;
        }
        input{
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <!-- 
        1.Vue中常用的按键别名:
            回车 =>enter
            删除=>delete(捕获“删除”和“退格”键)
            退出=>esc
            空格=>space
            换行=>tab(特殊，必须配合keydown去使用)
            上 =>up
            下=>down
            左=>left 
            右=> right
        2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名
        3.系统修饰键（用法特殊）:ctrl、alt、shift、meta
            (1).配合keyup使用:按下修饰健的同时，再按下其他键，随后释放其他健，事件才被触发。
            (2).配合keydown使用:正常触发事件。
        4.也可以使用keyCode去指定具体的按键（不推荐)
        5.Vue.config. keyCodes.自定义键名=键码，可以去定制按键别名

     -->
    <div id="box">
        <!-- 1.Vue中常用的按键别名: -->
       <input type="text" @keyup.enter="showInfo" placeholder="已提供的键盘按键(eg:enter)">

        <!--  2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名 -->
        <input type="text" @keyup.caps-lock="showInfo" placeholder="未提供的别名(eg:caps-lock)">

        <!-- 3.系统修饰键（用法特殊）:ctrl、alt、shift、meta
            (1).配合keyup使用:按下修饰健的同时，再按下其他键，随后释放其他健，事件才被触发。
            (2).配合keydown使用:正常触发事件。 -->
        <input type="text" @keyup.ctrl="showInfo" placeholder="配合keyup使用:按下修饰健的同时，再按下其他键，随后释放其他健，事件才被触发。">
        <input type="text" @keydown.ctrl="showInfo" placeholder="配合keydown使用:正常触发事件。">

        <!-- 4.也可以使用keyCode去指定具体的按键（不推荐) -->
        <input type="text" @keyup.13="showInfo" placeholder="使用keyCode去指定具体的按键（eg：13-enter）">

        <!-- 5.Vue.config. keyCodes.自定义键名=键码，可以去定制按键别名 -->
        <input type="text" @keyup.suliang="showInfo" placeholder="自定义键名=键码，可以去定制按键别名">
    </div>

    <script>
        Vue.config.productionTip = false;  //阻止vue在启动时生成生产提示
        //自定义键盘事件
        Vue.config.keyCodes.suliang = 13;
        //创建实例
        let vm = new Vue({
            el:"#box",
            data:{

            },
            methods:{
                showInfo(event){
                    alert(event.target.value)
                }
            }
        })
    </script>
</body>
</html>